import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Input } from 'tdesign-mobile-react';
import { Icon } from 'tdesign-icons-react';
import './search.less';

export default function Search() {
  const navigate = useNavigate();
  const [searchHistory] = useState([
    '就地过年',
    '周涛许晴',
    '张庭方回应被查处',
    '雪中星刀行徐张虎',
    '周雨彤谈素清姐姐',
    '马思纯新片定档',
    '广东租房群体或超2亿人',
    '一句是多少年'
  ]);

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="search-container">
      <div className="search-header">
        <Icon name="chevron-left" size="24px" onClick={handleBack} />
        <div className="search-input-wrapper">
          <Input
            placeholder="请输入关键词搜索"
            clearable
            prefixIcon={<Icon name="search" />}
          />
        </div>
      </div>
      <div className="search-history">
        <div className="history-title">搜索历史</div>
        <div className="history-list">
          {searchHistory.map((item, index) => (
            <div key={index} className="history-item">
              {item}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}